<template>
	<view>
		<view class="g-goBack" @click="$utils.toBack()">
			<view class="cuIcon-back"></view>
		</view>
		<view class="module">
			<view class="title">
				<text>{{title}}</text>
			</view>
			<view class="content1">
				<block v-for="(item,index) in monitors" :key="index">
					<view class="item" @click="$utils.toURL(item.path)">
						<view>
							<text class="value">{{item.num}}台</text>
							<text class="cuIcon-right"></text>
							<view>{{item.txt}}</view>
						</view>
					</view>
				</block>
			</view>
			<view class="content2">
				<block v-for="(item,index) in arrays" :key="item.path" >
					<view class="item">
						<view class="img-bg" @click="$utils.toURL(item.path)">
							<image class="big" :src="`/static/icons/${item.ico}.png`" mode="aspectFit"></image>
						</view>
						<view class="txt">{{item.txt}}</view>
					</view>
				</block>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id:'BXSCN',
				title:'户外共享电池',
				arrays:[
					{ico:'icon_quan',txt:'计费模板',path:'/device/bxscn/cost/template'}
				],
				monitors:[
					{txt:'设备总数',path:'/device/bxscn/list',num:0},
					{txt:'已部署数',path:'/device/bxscn/deploy_list',num:0},
					{txt:'在线设备',path:'/device/bxscn/online_list',num:0},
				]
				
			}
		},
		
		onLoad() {
			const api = this.$request;
			api.post(api.url.bxscnDevCount,{},res=>{
				if(res.code==200){
					this.title = res.body.deviceFunCodeName;
					this.monitors[0].num = res.body.deviceCount; //设备总数
					this.monitors[1].num = res.body.deployCount; //已部署数
					this.monitors[2].num = res.body.onlineCount; //在线数
				}else if(res.code == 202){
					//不处理
				}else if(res.msg){
					//显示错误信息
				}
			})
		},
		methods: {}
	}
</script>

<style lang="less">
	page{background-color: #f6f6f6;}
	.module{
		width: 96%;
		background-color: white;
		margin: 20rpx auto 0;
		padding: 20rpx 0 40rpx;
		border-radius: 20rpx;
		.title{
			font-size: 30rpx;
			font-weight: 600;
			padding:0 20rpx 10rpx;
			color: #555555;
			border-bottom: 4rpx solid #f6f6f6;
			display: flex;
			justify-content:center;
			align-items: center;
			.handle{
				color: #e85b36;
				font-weight: 400;
			}
		}
		.content1{
			display: flex;
			justify-content: space-between;
			align-items: center;
			flex-wrap: wrap;
			padding: 0 20rpx;
			.item{
				margin-top: 20rpx;
				width: 200rpx;
				height: 200rpx;
				background:linear-gradient(#e85b36,#eca768);
				border-radius: 20rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				flex-wrap: wrap;
				font-size: 24rpx;
				color: white;
				text-align: center;
				overflow: hidden;
				.value{
					color: white;
					font-weight: 600;
				}
			}
		}
		.content2{
			display: flex;
			justify-content: flex-start;
			align-items: flex-start;
			flex-wrap: wrap;
			.item{
				margin-top: 30rpx;
				width: 25%;
				text-align: center;
				color: #676767;
				font-size: 22rpx;
				font-weight: 600;
				.img-bg{
					width: 68rpx;
					height: 68rpx;
					margin: 0 auto 10rpx;
					border-radius: 50%;
					background-color: #fff6e7;
					display: flex;
					justify-content: center;
					align-items: center;
					position: relative;
					image.big{
						width: 48rpx;
						height: 48rpx;
					}
					image.small{
						width: 36rpx;
						height: 36rpx;
						border: 5rpx white solid;
						border-radius: 50%;
						position: absolute;
						top: -15rpx;
						right: -15rpx;
					}
				}
			}
		}
	}
</style>
